<template>
  <div class="page">
      <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <!-- 列表渲染 -->
    <div class="contente">
        <dl v-for="(item) in ListData" :key="item.price">
            <dt><h3>{{item.title}}</h3></dt>
            <dd>
                <p>简介:{{item.text}}</p>
                <p>价格:<span>{{item.price}}$</span></p>
            </dd>
        </dl>
    </div>
  </div>
</template>

<script>
export default {
    // 数据
    data(){
        return{
            ListData:[//列表数据
                {
                    title:"我是大帅哥",
                    text:"巧了我也是",
                    price:999,
                },{
                    title:"我是大帅哥2",
                    text:"巧了我也是2",
                    price:9992,
                },{
                    title:"我是大帅哥3",
                    text:"巧了我也是3",
                    price:9993,
                },{
                    title:"我是大帅哥4",
                    text:"巧了我也是4",
                    price:9994,
                },{
                    title:"我是大帅哥5",
                    text:"巧了我也是5",
                    price:9995,
                },
            ]
        }
    }
};
</script>

<style lang="scss">//css样式集合
.page {
  width: 100%;
  height: 100%;
  .contente{
      width: 100%;
      height: auto;
      padding: 5px 5px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
</style>
